Blogger Buzz: Blog Design

Date header-style into blogspot blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
This can be a really cool addition to your blog and something that can be customized to suit your layout and design. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTfj29h19BK5FnV-znfxb0NV4U03ejr-4N1HjKnloDhzGlAMTWaKBH1BqWPx946BcR7FjGxZ1wrGi9fE3CM_LM14yc_huv41Yx-2XAUFORcJTvG3fj-caYmAKEsAEobPXFxxQWd5MDldW/s1600/blogger-date-header-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="stylish blogger date header" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTfj29h19BK5FnV-znfxb0NV4U03ejr-4N1HjKnloDhzGlAMTWaKBH1BqWPx946BcR7FjGxZ1wrGi9fE3CM_LM14yc_huv41Yx-2XAUFORcJTvG3fj-caYmAKEsAEobPXFxxQWd5MDldW/s1600/blogger-date-header-style.png" title="how to customize blogspot blogger date header" /></a></div>
 
<h3>
Customize the Blogger Date Header of a Blogspot Blog</h3>
<div>
 
Step 1. Log in your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a>, go to Template > Edit HTML (don't forget to make a back-up of your current template by clicking on the Backup/Restore button) 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" width="320" /></a></div>
 Step 2. Click anywhere inside the code area and search (CTRL + F) for the following code: 
<blockquote class="tr_bq">
.date-header span</blockquote>
Below this code you should see a few lines like these: 
<blockquote class="tr_bq">
.date-header span { 
  background-color: $(date.header.background.color); 
  color: $(date.header.color); 
  padding: $(date.header.padding); 
  letter-spacing: $(date.header.letterspacing); 
  margin: $(date.header.margin); 
}</blockquote>
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4Ft9K_IMlzx82rkNQxKJHqbA-_iW6DYggT6ouBzqhy-__iUH6-DR8m-GqnHQO1c_I_2L89ZIye3LMeBhIZM4776oy4875o1ROGKdBnAnmDzOaBRSCTT5EGaX-kZbHyTUAldFuEGXSIUH/s1600/blogger-date.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="date header, blogger" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4Ft9K_IMlzx82rkNQxKJHqbA-_iW6DYggT6ouBzqhy-__iUH6-DR8m-GqnHQO1c_I_2L89ZIye3LMeBhIZM4776oy4875o1ROGKdBnAnmDzOaBRSCTT5EGaX-kZbHyTUAldFuEGXSIUH/s1600/blogger-date.png" title="how to customize blogger date header" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr>
</tbody></table>
 
Step 3. You need to replace the code above with this one: 
<blockquote>
.date-header { 
margin: 0px 0px -50px -190px; 
} 
.date-header span { 
background-color: #DDEDAA; 
color: #444; 
padding: 16px; 
border-radius: 70%; 
border: 3px solid #bada55; 
} 
.date-header:before { 
background: none repeat scroll 0 0 #FCFCFC; 
border: 10px solid #FFBD54; 
border-radius: 100%; 
bottom: -50px; 
content: ""; 
display: block; 
height: 30px; 
position: absolute; 
width: 30px; 
z-index: 10; 
margin-left: 140px; 
} 
.date-header:after { 
background: none repeat scroll 0 0 #F9F9F9; 
border: 7px solid #bada55; 
border-radius: 100%; 
bottom: -17px; 
content: ""; 
display: block; 
height: 15px; 
position: absolute; 
width: 15px; 
z-index: 10; 
margin-left: 166px; 
}</blockquote>
Customization 
 
- to change the background color of the date header, replace #DDEDAA with the hex code of your color 
- to change the date font color, replace #444; 
- to change the border color of the bigger circle below the date header, replace #FFBD54 
<div>
- to change the border color of the smaller circle, replace #bada55</div>
<div>
<div>
- to set the distance between date and post, change the -190px from margin-left 
 </div>
</div>
<div>
Step 4. Click on the Save template button to save the changes. 
So this is how you can add a new style to the blogger posts date header. Please keep in mind that codes vary from template to template - if you're having a customized template, then you might have a different CSS selector for the date header. </div>
</div>
</div>

Blog Design posts Date header-style into blogspot blogs

This can be a really cool addition to your blog and something that can be customized to suit your layout and design. What we are going to d...

How to remove labels from blog posts

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgHFEhsk20tPMx0yVVYQt2i1vaEPIoksQQLH0o_8IYle2sJF2yGpMfgd72ZChISnMsWqJ_PKA7WrauvZnTM01KqAgOHFbdFB5b9H_jvl-VilaCwHcCtJTP2YxLF0NaOoNQUvbQQPTZWHE/s1600/removing+blogger+labels+blogspot+tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgHFEhsk20tPMx0yVVYQt2i1vaEPIoksQQLH0o_8IYle2sJF2yGpMfgd72ZChISnMsWqJ_PKA7WrauvZnTM01KqAgOHFbdFB5b9H_jvl-VilaCwHcCtJTP2YxLF0NaOoNQUvbQQPTZWHE/s200/removing+blogger+labels+blogspot+tutorial.png" width="200" /></a></div>
 
Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title), we could simply uncheck the "Labels" option, however, sometimes this setting might not work properly in certain templates and then we'll have to remove it manually from our template. 
How we are going to do this? 
 
Hide labels from Blogger 
 
Step 1. Click on the 'Template' option and then go to the 'Edit HTML' button. 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="hide labels from blogger" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="hide labels from blogger" width="320" /></a></div>
 
Step 2. After you clicked on the Edit HTML button, click anywhere inside the code area and search by using the CTRL + F keys the </head> tag. 
 
Step 3. Just above the </head> tag, add the following code: 
<blockquote class="tr_bq">
<style> 
.post-labels {display: none;} 
</style></blockquote>
Step 4. Click the Save Template button to save the changes and you're done ;)</div>

Blog Design how to posts How to remove labels from blog posts

Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this...

Add a Custom jQuery Lightbox To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have already shown you in one of my previous tutorials <a href="http://buzzblogger1.blogspot.com/2013/03/how-to-customize-bloggers-lightbox.html" rel="nofollow" style="color: blue;" target="_blank">how to customize the Blogger lightbox</a> by changing the background color, borders or text color, but this tutorial will show you how to replace it entirely with a really cool jQuery Lightbox plugin that is very popular among bloggers. 
 
What this lightbox does is to display larger versions of the images that will pop up into a larger box when we click on them and lets us to easily navigate through a set of images using the previous and next buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHh-ZNZmqrwq-XuddZ7puNoPKnk3yOuKEjAIWmU3t1euF7j6L-u6nSSzLKWGpzcRnLvsXIgSpXL-PIyvI5J1v0knbUU0u-MlEJl1qbiJBB8DRP4j90p5I8LBvmnFT6T7OIR0xAtvT-mXX/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox, blogger plugins" border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHh-ZNZmqrwq-XuddZ7puNoPKnk3yOuKEjAIWmU3t1euF7j6L-u6nSSzLKWGpzcRnLvsXIgSpXL-PIyvI5J1v0knbUU0u-MlEJl1qbiJBB8DRP4j90p5I8LBvmnFT6T7OIR0xAtvT-mXX/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
 
To see a demo of it, please visit this page and click on any image to enlarge. 
 
 
<h3>
Adding jQuery Lightbox to Blogger</h3>
Step 1. From your <a blogger.com="" href="https://www.blogger.com/null" http:="" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a>, click on Template > Edit HTML  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Edit HTML" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="how to add a custom jquery lightbox to blogger " width="320" /></a></div>
 
Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. 
Paste the following tag inside the search box and hit Enter to find it: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Step 3. Choose a style from below and just above the ]]></b:skin> tag, paste the CSS code: 
 
Lightbox with white background: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisddKeZTsqChcwBFnHaxDzVN5MSgA9uFWeNXOCaR4XC2HWBuj4mVmwRP9Ju5BbCBQ-YR94WiFyjBR4kq1DxpPtiqjRdqj57HaiQc6hAcQNS2fzafeXqjUsutfXiVLH-180E5jF04uRtxZZ/s1600/jquery-lightbox-with-white-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox white" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisddKeZTsqChcwBFnHaxDzVN5MSgA9uFWeNXOCaR4XC2HWBuj4mVmwRP9Ju5BbCBQ-YR94WiFyjBR4kq1DxpPtiqjRdqj57HaiQc6hAcQNS2fzafeXqjUsutfXiVLH-180E5jF04uRtxZZ/s1600/jquery-lightbox-with-white-background.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
<blockquote class="tr_bq">
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} 
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;} 
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;} 
#jquery-lightbox a img{border:none;} 
#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;} 
#lightbox-container-image{padding:10px;} 
img#lightbox-image {max-height: 540px;max-width: 940px;} 
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;} 
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;} 
#lightbox-container-image-box > #lightbox-nav{left:0;} 
#lightbox-nav a{outline:none;} 
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;} 
#lightbox-nav-btnPrev{left:10%;float:left;} 
#lightbox-nav-btnNext{right:10%;float:right;} 
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;} 
#lightbox-container-image-data{padding:0 10px;color:#555;} 
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;} 
#lightbox-image-details-caption{font-weight:bold;} 
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;} 
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}</blockquote>
Lightbox with dark background: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPKmYelj_d-Y04BXc1UG9nZQ_rRORj2m9XitnNK1dlu0soKCX06m7rU23c1xbzTEA9_QaNJWGS6yOgB_F-YfbuW2u7nhdv-oi9rpdfWfE3gH6ju-EOpKOPgXUiSsy-W8yFKovDK0iOhw0/s1600/jquery-lightbox-with-dark-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox dark" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPKmYelj_d-Y04BXc1UG9nZQ_rRORj2m9XitnNK1dlu0soKCX06m7rU23c1xbzTEA9_QaNJWGS6yOgB_F-YfbuW2u7nhdv-oi9rpdfWfE3gH6ju-EOpKOPgXUiSsy-W8yFKovDK0iOhw0/s1600/jquery-lightbox-with-dark-background.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
<blockquote class="tr_bq">
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} 
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0} 
#jquery-lightbox a,#jquery-lightbox a:hover{border:none} 
#jquery-lightbox a img{border:none;} 
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto} 
#lightbox-container-image{padding:10px;} 
img#lightbox-image {max-height: 540px;max-width: 940px;} 
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0} 
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10} 
#lightbox-container-image-box > #lightbox-nav{left:0;} 
#lightbox-nav a{outline:none} 
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block} 
#lightbox-nav-btnPrev{left:10%;float:left} 
#lightbox-nav-btnNext{right:10%;float:right} 
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0} 
#lightbox-container-image-data{padding:0 10px;color:#fff} 
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left} 
#lightbox-image-details-caption{font-weight:bold} 
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em} 
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}</blockquote>
Step 4. Now find the </head> tag and just above it, add the following scripts: 
 
Lightbox with white background: 
<blockquote class="tr_bq">
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/></blockquote>
Lightbox with dark background: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/></blockquote>
Step 5. Click on the Save template button. 
 
Now we need to disable the original Blogger lightbox so that it doesn't interfere with this one that we just added. Go to Settings > Posts and comments and on the right side you will see the "Showcase images with Lightbox" section. Select "No" and click on the Save settings button on the upper right side. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPuID3-RadlYuunaV29yMi3-OHwQ-KNAcpE6c3yH63m66hBV8o-OF1jMUKREa9D2zHwdnMO6Gk_YKt5WF9TLLQNyDSJePSs8DRqk0nZ1lU-IaXkbV1FQTvXCRPTzV-FsK_Fsj0LkdkDd7/s1600/disable-blogger-lightbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="disable blogger lightbox" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPuID3-RadlYuunaV29yMi3-OHwQ-KNAcpE6c3yH63m66hBV8o-OF1jMUKREa9D2zHwdnMO6Gk_YKt5WF9TLLQNyDSJePSs8DRqk0nZ1lU-IaXkbV1FQTvXCRPTzV-FsK_Fsj0LkdkDd7/s1600/disable-blogger-lightbox.png" title="Add a custom jquery lightbox to blogger" width="400" /></a></div>
 
Now view your blog and click on any image to see the lightbox in action.</div>

Blog Design Image Effects jQuery Add a Custom jQuery Lightbox To Blogger

If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have alread...

How to Add CSS code To Blogger using Template Designer

<div dir="ltr" style="text-align: left;" trbidi="on">
If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and fast way to add CSS (Cascading Style Sheets) so that it will be easier for you to customize your blog. 
 
Some readers have complained that when they had to add the CSS codes to install some feature in Blogger, they found it difficult to locate the ]]></b:skin> tag. So, I decided to make this quick tutorial to show you another way of adding the CSS without having to access the Blogger HTML editor. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIm6kGrJAYRz__MI_Xziw0iUWZtvUGrdYOgLDIqsKbtv3TXr-mpTqxhanE1ULNa4DL00hqzfAqwnkr_tMCgxBP7pLDlY7ABIf-QbSzbAG4eFFHMoMkILkaL4A5yBw86ouXyVU_TZD5eR-/s1600/blogger-template-designer-add-custom-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIm6kGrJAYRz__MI_Xziw0iUWZtvUGrdYOgLDIqsKbtv3TXr-mpTqxhanE1ULNa4DL00hqzfAqwnkr_tMCgxBP7pLDlY7ABIf-QbSzbAG4eFFHMoMkILkaL4A5yBw86ouXyVU_TZD5eR-/s1600/blogger-template-designer-add-custom-css.png" /></a></div>
 
 
<h3>
Adding CSS via the Blogger Template Designer</h3>
Step 1. Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a> and select the blog that you want to customize. 
 
Step 2. From the Blogger dashboard, choose "Template" and click on the "Customize" button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGolrw7WMCfX3IKzMaV7IfXUlnTCa2dTxQiys-ft5IZYWgv8wkI_aLKo2afh-bWSMmPBO6R1oJR1WZaYNthUIrvx7E_CofzzoqJt_IV8i1nHC7vFxFRA7lP50xhOBNCxaiJ4OJC6dSKHl/s1600/how-to-add-css-using-blogger-dashboard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQovj34p5Dr1lyjKrCM5S7cPmnFSU4y0LKEN1-rXFmwVi4_4rP_qY7cmOsc9z9_bAg6oACJ0PqvcI_siAUcvygz8tWu_A4jF0yG_FT_mx-M3yyQ8VpjjS2wvRxrEET4wzYPDBfA61hznb/s1600/BLogger+Customese.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Designer" border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQovj34p5Dr1lyjKrCM5S7cPmnFSU4y0LKEN1-rXFmwVi4_4rP_qY7cmOsc9z9_bAg6oACJ0PqvcI_siAUcvygz8tWu_A4jF0yG_FT_mx-M3yyQ8VpjjS2wvRxrEET4wzYPDBfA61hznb/s1600/BLogger+Customese.jpg" title="Template Designer" width="320" /></a></div>
 
Step 3. Click on the "Advanced" tab. 
 
Step 4. Now just add your CSS code inside the right field, located in the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code when you want to apply a new style to your template. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-Am-l0ySOEvAisw73EGYpRIrba3T0XDTnPnnkMEIATnSO2uHtMMVLlA9HiJEtKPAfi6n3l0SmlyAIBY3dhbXwEIbNfRM4j_cxUmqqw-V476kJux8TwCIhszBQndWQQE4a0M0KE7fDSvU/s1600/add-css-styles-using-blogger-template-designer-advanced.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Designer" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-Am-l0ySOEvAisw73EGYpRIrba3T0XDTnPnnkMEIATnSO2uHtMMVLlA9HiJEtKPAfi6n3l0SmlyAIBY3dhbXwEIbNfRM4j_cxUmqqw-V476kJux8TwCIhszBQndWQQE4a0M0KE7fDSvU/s1600/add-css-styles-using-blogger-template-designer-advanced.png" title="Template Designer" width="640" /></a></div>
 
Step 5. Once added, click on the "Apply to blog" button to save the changes. 
 
Following this method you can't edit the existing CSS styles already added in your template, which will require to access the template's HTML and make the modifications there. Here you can only add new styles and edit the existing styles added through the Template Designer panel. 
 
It is also important to mention that when adding the CSS styles, it isn't required to put the <style type="text/css"> ... </style> style tags, which normally would go above the </head> tag of the template html. Adding those tags may result in an error. 
 
If you change the template, the CSS added here will be removed. The same goes for any other additions or CSS customizations made ??through the Template HTML editor.</div>

Blog Design css how to How to Add CSS code To Blogger using Template Designer

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and...

Understanding the Page Elements of a Blogger Layout

<div dir="ltr" style="text-align: left;" trbidi="on">
When following a tutorial to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of certain terms, and sometimes, it may be harder to locate them. As for the gadgets, usually it is required to access the blog's layout in order to add or arrange any of the page elements. 
 
For a better understanding, here are some basic explanations about the Page Elements located in the Layout section of a Blogger dashboard. 
 
 
<h3>
What are the Page Elements?</h3>
Page Elements is, basically, the body of our blog. To access the Page Elements, we need to click on the "Layout" option in the <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a>. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-44d2y0wdqA6iWiKzSOrHfyOQuPgSSt8a162LVaWGPTdrt7UkTl1u5MMF3IwAqWudRXiyxynBQxQ1a1aC-fO1yw3XCHUIZUV5iN-oHfa1YT0CmpmTXezXMfjxoZp1yxbAzd67knRI1VNm/s1600/blogger-page-elements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-44d2y0wdqA6iWiKzSOrHfyOQuPgSSt8a162LVaWGPTdrt7UkTl1u5MMF3IwAqWudRXiyxynBQxQ1a1aC-fO1yw3XCHUIZUV5iN-oHfa1YT0CmpmTXezXMfjxoZp1yxbAzd67knRI1VNm/s1600/blogger-page-elements.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
 
 
<h3>
Understanding the Page Elements sections</h3>
The Blogger Layout is made of "sections and elements". The sections mark certain areas of a page. Every section is represented by the tag <b:section> and has an unique "ID" that names its element which is followed by a "class" tag. Each section has some attributes and through these, we can determine the number of elements allowed in the section and if this section gives the option to add a "page element". 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxa7c0UHy8nIlRarLA3rFQ5OHIlHzECuCcUo8G_heGKxiS0Bw7r7DSVyFi2m0D8NWb_NTEH8P_U8tJ_QDX3uc76OxqV9Pii72JPdUjIvJCQ-4Dm0PVnk6vNc7NlUto8972fNP3daFGhuV/s1600/layout-page-elements-sections-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxa7c0UHy8nIlRarLA3rFQ5OHIlHzECuCcUo8G_heGKxiS0Bw7r7DSVyFi2m0D8NWb_NTEH8P_U8tJ_QDX3uc76OxqV9Pii72JPdUjIvJCQ-4Dm0PVnk6vNc7NlUto8972fNP3daFGhuV/s1600/layout-page-elements-sections-blogger.png" width="640" /></a></div>
 
Let's take a look to an example of the default code related to the header section found in the HTML of a Blogger template: 
<blockquote class="tr_bq">
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<-- rest of the code --> 
</b:section></blockquote>
Breaking apart the code above: 
<ol>
<li><b:section is the opening tag of the section.</li>
<li>class='header' - describes the existing group inside the "header" element </li>
<li>id='header' - identifies and specifies the header as a single element.</li>
<li>maxwidgets='1' - determines the number of elements allowed in the "header"; here we have the number of gadgets that we can include in the header section. In this example, '1' means that this section allows us to add only a gadget.</li>
<li>showaddelement='no' - the 'no' attribute means that the header will not show the "Add a gadget" link or we won't be able to move any Page Elements. To activate this option so that we can add new Page Elements (Add a gadget), we should change 'no' to 'yes'. By setting the "showaddelement" attribute to 'yes', we'll be able to arrange the elements as we like, just click on the element that you want to move and drag & drop it wherever you want.</li>
</ol>
The spaces reserved for adding elements in the existing sections are called Gadgets (or Widgets). You can easily add various Page Elements by clicking "Add a Gadget" link. This will open a pop-up window for you to pick and choose which elements should be added. Click on the Gadget's title or on the blue plus sign symbol to add it to your blog's layout. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLGzWusEf5PT7PiYlWwOW07Qm9D2HUPTuctEwuKp7imKsvBuvibhgEzpmBtXKeQ0TQw4n0zUYCjc47x2Bocm8vTQ3Mr9azHKA7pmBKOO5iDEUgfCALt3ZZI5xf7pXXTp512s0Fu16Qb_f/s1600/add-a-gadget-or-page-element-html-javascript-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLGzWusEf5PT7PiYlWwOW07Qm9D2HUPTuctEwuKp7imKsvBuvibhgEzpmBtXKeQ0TQw4n0zUYCjc47x2Bocm8vTQ3Mr9azHKA7pmBKOO5iDEUgfCALt3ZZI5xf7pXXTp512s0Fu16Qb_f/s1600/add-a-gadget-or-page-element-html-javascript-blogger.png" width="640" /></a></div>
 
After you have added a page element, gadgets can be moved up, down or sideways. You can put them wherever you want. Of all the existing gadgets, the most used is the "HTML/JavaScript". Inside this gadget (widget) you can insert any code, as long as it is in the HTML or JavaScript language. 
 
Each time you decide to add a new gadget, click on the "Add a gadget" link in the area where you want to add it. For example, if you want to add a JavaScript code and want it to appear in the sidebar, you should click on the "Add a gadget" in the "sidebar" section, choose the "HTML/JavaScript" option and paste the code in there. 
 
Once you have added new gadgets (widgets), it is recommended to check the changes by clicking on the Preview button before saving anything. So, if something went wrong, you simply click on "Clear" so that everything that was not saved to return to its previous state. If the position of any Page Elements (Gadgets) has been rearranged, you will need to click on the Save arrangement button in order to see the changes.</div>

Blog Design how to Understanding the Page Elements of a Blogger Layout

When following a tutorial to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of ...

Add Author's Profile Picture and Name in Multi Author Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial we will see how to add a photo next to the name of the author just below the post title. This feature can be used on Blogger blogs that have not only one author but also on blogs with multiple authors, so the info for each of the publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI68aWjSrbRyQeP9Smku3KnT8aWU5P_SRysIVA3D_v2elsY45tAW1gjIrQIz8A1PzFqW9QckIApgfrNoSnynJzNMuEn6dEecTR0Yqr32UfEQHryCoTD6AoZICKdBoRf_JorFzjuitJmimD/s1600/display-author-profile-picture-and-name-below-blogger-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="multi-author blog, blogger tricks" border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI68aWjSrbRyQeP9Smku3KnT8aWU5P_SRysIVA3D_v2elsY45tAW1gjIrQIz8A1PzFqW9QckIApgfrNoSnynJzNMuEn6dEecTR0Yqr32UfEQHryCoTD6AoZICKdBoRf_JorFzjuitJmimD/s1600/display-author-profile-picture-and-name-below-blogger-posts.png" title="show author's profile picture and name in multi author blog" width="320" /></a></div>
 
I strongly recommend to make a backup of your template before making any changes. 
 
 
<h3>
Adding the Author's Profile Picture / Avatar and Name in Blogger</h3>
 
Step 1. From the <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a>, go to Template and click on the Edit HTML button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. 
Paste the following code inside the search box and hit Enter to find it: 
<blockquote class="tr_bq">
</blockquote>
Just below this line, you should see the rest of code which should look something like this: 
<blockquote class="tr_bq">
              
                <b:if cond='data:top.showAuthor'> 
                  <b:if cond='data:post.authorProfileUrl'> 
                    
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> 
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> 
                        <data:post.author/> 
                      </a> 
                    
                  <b:else/> 
                    
                      <data:post.author/> 
                    
                  </b:if> 
                </b:if>  
</blockquote>
Note: If you are using a modified template, it could look something like this: 
<blockquote class="tr_bq">
 
<b:if cond='data:top.showAuthor'> 
<data:top.authorLabel/> 
<data:post.author/> 
 
</b:if> </blockquote>
Step 3. Now that you found the code, delete it. Pay attention that it should start and end with the tags marked in yellow. This code is repeated two times, so you need to replace it two times. 
 
Step 4. Next, search for this line (you'll find it twice and you should stop at the second one): 
<blockquote class="tr_bq">
<div class='post-header-line-1'/></blockquote>
Step 5. Just below it, paste the following code: 
<blockquote class="tr_bq">
 
<b:if cond='data:post.author == &quot;AuthorName&quot;'> 
<a href='Author-Profile-URL'><img src='Author-Image-URL'/></a> 
</b:if> 
        <b:if cond='data:top.showAuthor'> 
          <data:top.authorLabel/> 
            <b:if cond='data:post.authorProfileUrl'> 
              
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'> 
                  <data:post.author/> 
                </a> 
              
            <b:else/> 
              <data:post.author/> 
            </b:if> 
        </b:if> 
      </blockquote>
Replace the AuthorName text with the EXACT name that appears on the Blogger profile, i.e., the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work. To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. I recommend you to use an image with a maximum height of 40px and 40px wide. 
Once done, the photo of the author should appear next to the "posted by" text just below the post title. 
 
If you have a blog with more than one author, add a code like the one below, just above <b:if cond='data:top.showAuthor'> 
<blockquote class="tr_bq">
<b:if cond='data:post.author == &quot;AuthorName2&quot;'> 
<a href='Author2-Profile-URL'><img src='Author2-Image-URL'/></a> 
</b:if> </blockquote>
If you have more than two authors, repeat this block of code for each author that you want to add. 
 
Step 6. Now let's go ahead and add the CSS styles - search for the ]]></b:skin> tag and just above it, paste the following code: 
<blockquote class="tr_bq">
.author img{ 
float: left; 
border: 1px solid #FFFFFF; 
border-radius: 5px; 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 
margin: 0px 5px 10px 0px; 
width:35px; 
height:35px;  
} 
.post-author{ 
color:#777; 
font-size: 13px; 
} 
.post-author a { 
color:#777;  
margin-top: 10px; 
}</blockquote>
... to change the size of avatar, increase/decrease the 35px values. 
 
Step 7. Click on the Save template button and now you should see the profile picture and name of the Blogger author below the title of each post.</div>

Blog Design Add Author's Profile Picture and Name in Multi Author Blog

In this tutorial we will see how to add a photo next to the name of the author just below the post title. This feature can be used on Blogg...

Add A CSS Animated Share Button on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
I saw this on <a href="http://www.paulund.co.uk/animated-css-share-button" rel="nofollow" style="color: blue;">Paulund</a>, a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop small utilities, all of these being applicable to web design. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunGEyyN9Ili7BdQRVCwlW1-la3f29IcPtqJeFQ2-eZ5RIJg1x02MF3mFLW4AAWQ9OEoYmO-IeCEIXCzHtEV82n3EUpt_S83pYwGQL9bx_umBi2ZhF-W7HPEeLfyAHFHggqeirDLyozQH_/s1600/css-animated-share-button-with-social-media-icons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS Animated Share Buttons" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunGEyyN9Ili7BdQRVCwlW1-la3f29IcPtqJeFQ2-eZ5RIJg1x02MF3mFLW4AAWQ9OEoYmO-IeCEIXCzHtEV82n3EUpt_S83pYwGQL9bx_umBi2ZhF-W7HPEeLfyAHFHggqeirDLyozQH_/s1600/css-animated-share-button-with-social-media-icons-for-blogger.png" title="CSS Animated Share Buttons" /></a></div>
 
In this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below. 
 
Demo 
<style>.share_button { width: 300px; height: 50px; margin: 10px auto; } .share_button ul { width: 50%; height: inherit; float: left; list-style: none; margin: 0 !important; padding: 0 !important; } .share_button ul h1 { margin-top: 9%; overflow: hidden; width: 100%; color: #4889F0; font-size: 18px; text-shadow:2px 2px 2px #fff; } .share_button ul li { position: absolute; height: inherit; width: 150px; margin: 0 !important; padding: 0 !important; background: #EEEEEE; -webkit-transition: all 600ms; -moz-transition: all 600ms; -o-transition: all 600ms; -ms-transition: all 600ms; transition: all 600ms; text-align: center; } .share_button ul li h2 { display: inline-block; width: 32%; height: 40px; overflow: hidden; margin-top: 5%; cursor: pointer; border: 0 !important; } .share_button ul:first-child li:first-child{ text-align: right; } .share_button ul:last-child li:first-child{ text-align: left; } .share_button ul:first-child li:last-child, .share_button:hover ul:first-child li:first-child { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); } .share_button ul:last-child li:last-child, .share_button:hover ul:last-child li:first-child { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } .share_button:hover ul:first-child li:last-child, .share_button:hover ul:last-child li:last-child { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } </style> 
<div class="share_button">
<ul>
<li><h1>
 Share t </h1>
</li>
<li><h2>
 <a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title " href="https://www.blogger.com/null" title="Share on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPu54V7eq7mMwRR_gcJ_6oMB2-l4C2vEU44j4Uv0WrniCmBD13OlmGdmi9SJn7OL-AC1xLhgDr2RluHrZU6DYzMRh4H_ByaMYtCj9s6Bmf17hJb-yVKbsBfBRd-hfqpD7lUaWkWY-8AZ7x/s1600/Facebook.png" /></a></h2>
<h2>
<a expr:href=""http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl " href="https://www.blogger.com/null" title="Share on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAia8t_UvGp6cOQmfDo7bR0XFrh69Ew8MTJ2KxA1WqiXJWbLebuFwsZYJRed265zihe2tX4Tw0GKbXi8DSeN1t93X2VgZewLe2lXA1mJ8RYx9Jl4HB1vQ7emhdDWf3IpAiByVwmmvq4ZE/s1600/Twitter.png" /></a></h2>
</li>
</ul>
<ul>
<li><h1>
his page</h1>
</li>
<li> <h2>
<a expr:href=""https://plus.google.com/share?url=" + data:post.canonicalUrl " href="https://www.blogger.com/null" title="Share on Google Plus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHsj4dx6oSwk6JjiuoX_EBTatgTJ1DX-1rnwHOkYIQF4XA3URP13vIVvvivhoCfP3bSvSc4CWk5iuQYrBTbzmFMBSxsztkXjGaH7e13qyBQwPZ0zTMKvPoCGeFVykqslcRPkPaFSwsPzi/s1600/Google-plus.png" /></a></h2>
<h2>
 <a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" title="Share on Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTgU4UcSyqn6_VsHYQKp8-WDoME_un3m36cCc7VHoETFsGSKsQRMw_WvD8DDJWw69e_P9RpeVzct75oyI5HWh1QlRzN-PtojIrKhVQpymVKKLldla8sztQROHSUQKBCaqOJh-VxgCV3gC/s1600/Pinterest.png" /></a> </h2>
</li>
</ul>
</div>
 
<h3>
Creating A CSS Animated Share Button</h3>
 
Step 1. From your <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger dashboard</a> > go to Template > click on the Edit HTML button. 
 
Step 2. Click anywhere inside the code area and press the Ctrl + F keys to open the blogger search box. Type or paste the ]]></b:skin> tag and hit Enter to find it. Step 3. Just above ]]></b:skin> add this CSS: 
<blockquote class="tr_bq">
.share_button { 
width: 300px; 
height: 50px; 
margin: 10px auto; 
} 
.share_button ul { 
width: 50%; 
height: inherit; 
float: left; 
list-style: none; 
margin: 0 !important; 
padding: 0 !important; 
} 
.share_button ul h1 { 
margin-top: 9%; 
overflow: hidden; 
width: 100%; 
color: #4889F0; 
font-size: 18px; 
text-shadow:2px 2px 2px #fff; 
} 
.share_button ul li { 
position: absolute; 
height: inherit; 
width: 150px; 
margin: 0 !important; 
padding: 0 !important; 
background: #EEEEEE; 
-webkit-transition: all 600ms; 
-moz-transition: all 600ms; 
-o-transition: all 600ms; 
-ms-transition: all 600ms; 
transition: all 600ms; 
text-align: center; 
} 
.share_button ul li h2 { 
display: inline-block; 
width: 32%; 
height: 40px; 
overflow: hidden; 
margin-top: 5%; 
cursor: pointer; 
border: 0 !important; 
} 
.share_button ul:first-child li:first-child{ 
text-align: right; 
} 
.share_button ul:last-child li:first-child{ 
text-align: left; 
} 
.share_button ul:first-child li:last-child, 
.share_button:hover ul:first-child li:first-child { 
-webkit-transform: rotateY(90deg); 
-moz-transform: rotateY(90deg); 
-o-transform: rotateY(90deg); 
-ms-transform: rotateY(90deg); 
transform: rotateY(90deg); 
} 
.share_button ul:last-child li:last-child, 
.share_button:hover ul:last-child li:first-child { 
-webkit-transform: rotateY(-90deg); 
-moz-transform: rotateY(-90deg); 
-o-transform: rotateY(-90deg); 
-ms-transform: rotateY(-90deg); 
transform: rotateY(-90deg); 
} 
.share_button:hover ul:first-child li:last-child, 
.share_button:hover ul:last-child li:last-child { 
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
-o-transform: rotateY(0deg); 
-ms-transform: rotateY(0deg); 
transform: rotateY(0deg); 
}</blockquote>
 
Step 5. And now let's go ahead and insert the HTML button in the template. The most common place would be just after <div class='post-footer'> - find the second <div class='post-footer'> and paste the following code just above it: 
<blockquote class="tr_bq">
<div class='share_button'> 
 
<ul> 
<li><h1> 
Share t 
</h1></li> 
 
<li><h2> 
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPu54V7eq7mMwRR_gcJ_6oMB2-l4C2vEU44j4Uv0WrniCmBD13OlmGdmi9SJn7OL-AC1xLhgDr2RluHrZU6DYzMRh4H_ByaMYtCj9s6Bmf17hJb-yVKbsBfBRd-hfqpD7lUaWkWY-8AZ7x/s1600/Facebook.png"/></a></h2> 
 
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAia8t_UvGp6cOQmfDo7bR0XFrh69Ew8MTJ2KxA1WqiXJWbLebuFwsZYJRed265zihe2tX4Tw0GKbXi8DSeN1t93X2VgZewLe2lXA1mJ8RYx9Jl4HB1vQ7emhdDWf3IpAiByVwmmvq4ZE/s1600/Twitter.png"/></a></h2> 
</li> 
</ul> 
<ul> 
<li><h1>his page</h1></li> 
 
<li> 
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHsj4dx6oSwk6JjiuoX_EBTatgTJ1DX-1rnwHOkYIQF4XA3URP13vIVvvivhoCfP3bSvSc4CWk5iuQYrBTbzmFMBSxsztkXjGaH7e13qyBQwPZ0zTMKvPoCGeFVykqslcRPkPaFSwsPzi/s1600/Google-plus.png"/></a></h2> 
 
<h2> 
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTgU4UcSyqn6_VsHYQKp8-WDoME_un3m36cCc7VHoETFsGSKsQRMw_WvD8DDJWw69e_P9RpeVzct75oyI5HWh1QlRzN-PtojIrKhVQpymVKKLldla8sztQROHSUQKBCaqOJh-VxgCV3gC/s1600/Pinterest.png"/></a> 
</h2> 
</li> 
</ul> 
 
</div></blockquote>
Note: if you want to change the icons, replace the URLs in blue. 
 
Step 5. Click on the Save template button and we're done! Enjoy ;)</div>

Blog Design social media Widgets Add A CSS Animated Share Button on Blogger

I saw this on Paulund , a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop sm...

How to Increase Thumbnail Resolution on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry. 
 
In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget but we can apply this trick on any of the blog widgets. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Increase Thumbnail resolution " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" title="Increase Thumbnail resolution on Blogger" /></a>.</div>
 
<h3>
Changing the Thumbnail Size for the Popular Posts Widget </h3>
 
Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window. 
 
Step 2. Go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3. Type or paste the </head> tag inside the search box then hit Enter to find it. After you found the </head> tag, add this CSS above it: 
<blockquote class="tr_bq">
<style type='text/css'> 
.PopularPosts .item-thumbnail a { 
clip: auto; 
display: block; 
height: 130px; 
margin: 0 0px 5px; 
overflow: hidden; 
width: 210px; 
border: 2px solid #EEEEEE; 
border-radius: 20px; 
} 
.PopularPosts .item-thumbnail img { 
position: relative; 
top: -30px; 
transition:all .2s linear; 
 -o-transition:all .5s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; 
} 
.PopularPosts .item-thumbnail img:hover{ 
opacity:.6; 
filter:alpha(opacity=60) 
} 
.PopularPosts .widget-content ul li { 
background: #F9F9F9; 
border: 2px solid #EEEEEE; 
border-radius: 10px; 
box-shadow: 0 4px 10px #EEEEEE; 
color: #555555; 
padding: 10px; 
margin-bottom: 5px; 
} 
.PopularPosts .item-title { 
font: 14px Cambria,Georgia, sans-serif; 
color: #2288BB; 
font-weight: bold; 
text-transform: uppercase; 
text-align: center; 
} 
.PopularPosts .item-snippet { 
display: none; 
} 
.widget .widget-item-control a img { 
height: 18px; 
width: 18px; 
} 
</style></blockquote>
Step 4. Search for the </body> tag and just above it, add this script: 
<blockquote class="tr_bq">
<script type='text/javascript'>                   
function changeThumbSize(id,size){ 
var blogGadget = document.getElementById(id); 
var replacement = blogGadget.innerHTML; 
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); 
var thumbnails = blogGadget.getElementsByTagName("img"); 
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
} 
} 
changeThumbSize("PopularPosts1",210);                   
</script></blockquote>
What I highlighted in red is the widget ID for the Popular Posts gadget - to change the thumbnails size for any of your blog widgets, first you need to find the gadget/widge ID and then add a line below this part: 
<blockquote class="tr_bq">
changeThumbSize("PopularPosts1",210); 
changeThumbSize("widget-ID-HERE",210);</blockquote>
 ... and replace widget-ID-HERE text with the ID of that widget/gadget. 
 
Note: you'll not be able to see the changes if the widget has a class selector - for this you will need to change class with id and replace the dot "." symbol with "#" within the CSS... 
 
Step 5. Finally, Save the Template.  
 
 If you need more help, please leave a comment below.</div>

Blog Design css Image Effects javascript popular posts Widgets How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigg...

Create a CSS3 Image Hover Effect with Animated Vinyl Record

<div dir="ltr" style="text-align: left;" trbidi="on">
Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect for blogs dedicated to music or if you just want to show off the music that you love. 
 
So, what we will do in this tutorial is to take an image for our album cover, add some fancy CSS3 transitions and transforms that, on hover, will slide out a pure-CSS vinyl record behind it. Finally, we will add some basic HTML to our post or page where we need to apply this amazing effect. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzuKEwK9nshDuU4TPVWHhJvC8AHdjhB2lb4Rhdayx79u-HWISr_pp10IioK5ktCuwjPGOJWkKSp7TcNrIJr2GrQFm28-mV0sgfovqxhv594YayXLf3WcmsquFMRT8Zfh6oOYUFFoyJ97N/s1600/create-css3-animated-vinyl-record-for-blogger-images.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzuKEwK9nshDuU4TPVWHhJvC8AHdjhB2lb4Rhdayx79u-HWISr_pp10IioK5ktCuwjPGOJWkKSp7TcNrIJr2GrQFm28-mV0sgfovqxhv594YayXLf3WcmsquFMRT8Zfh6oOYUFFoyJ97N/s1600/create-css3-animated-vinyl-record-for-blogger-images.png" /></a></div>
 
Demo: hover over the album cover and see how CSS reveals further information: 
 
 
<div class="case">
<div class="overlay">
</div>
<img class="cover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJdmN7FboTReDhZ1Zs0cIkyDUGkv-7DxZqALBDSOZeorrOUeL_g2SmKaqYFKJwPphAXZwm3pk6hXC8DZBW0CVZZ3sqnDY18ePYBMr14HQMGb3DZx2szylfxmHrsSV_DBYVs4I6fwotYA/s1600/pink-floyd-the-wall.jpg" />The Wall is the eleventh studio album by the English progressive rock group Pink Floyd. 
<div class="slotwrapper">
<div class="slot">
</div>
</div>
<div class="vinyl">
</div>
</div>
 
 
<h3>
How to Apply The Animated Vinyl Record on Blogger Images</h3>
 
Step 1. From your <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger's Dashboard</a>, go to Template > click on the Edit HTML button: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box: 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" width="320" /></a></div>
Step 3. Type or paste inside the search box the tag below and hit Enter to find it: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Step 4. Just above ]]></b:skin> add the following code: 
 
<style>.checked-selector {display: none;} :checked ~ .checked-selector {display: block;} input.hidden[type=checkbox] {position: absolute;left: -999em;} </style> <label for="toggle-hidden">Click to expand the code</label><input class="hidden" id="toggle-hidden" type="checkbox" /> 
<div class="checked-selector">
<blockquote class="tr_bq">
.info { 
position: absolute; 
z-index: 3; 
top: 20%; 
zoom: 1; 
filter: alpha(opacity=0); 
opacity: 0; 
padding: 10px; 
text-align: center; 
color: #eee; 
font-size: 13px; 
font-weight: bold; 
background: #333; 
background: rgba(0,0,0,.7); 
-moz-transition:all linear 0.5s 0s; 
-webkit-transition:all linear 0.5s 0s; 
transition:all ease 0.5s 0s; 
} 
.case:hover .info, .case:hover .vinyl { 
filter: alpha(opacity=100); 
opacity:1; 
} 
.case { 
position:relative; 
display:block; 
width:185px; 
height:185px; 
-webkit-border-radius:3px; 
border-radius:3px; 
z-index:2; 
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); 
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); 
margin:0 auto; 
} 
.case:after { 
position:absolute; 
display:block; 
content: ""; 
width:265px; 
height:10px; 
left:-40px; 
bottom:-8px; 
z-index:1; 
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.45)), color-stop(50%,rgba(0,0,0,0)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
    background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
} 
.case .cover{ 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
z-index:2; 
-webkit-border-radius:3px; 
border-radius:3px; 
-webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); 
box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); 
} 
.case .overlay{ 
position:absolute; 
display:block; 
top:0; 
left:0; 
z-index:3; 
width:100%; 
height:100%; 
-webkit-box-shadow: inset 1px 1px 4px 0px rgba(255, 255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); 
    box-shadow: inset 1px 1px 4px 0px rgba(255,255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); 
-webkit-border-radius:3px; 
border-radius:3px; 
border:1px solid rgba(0, 0, 0, 0.35); 
} 
.case .overlay:before{ 
    position:absolute; 
    display:block; 
    content: ""; 
    top:0; 
    left:0; 
    z-index:4; 
    width:100%; 
    height:100%; 
    background: -moz-linear-gradient(-55deg,  rgba(255,255,255,0.1) 0%, rgba(244,244,244,0.35) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(50%,rgba(244,244,244,0.35)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* IE10+ */ 
    background: linear-gradient(-55deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* W3C */ 
    -webkit-border-radius:3px; 
    border-radius:3px; 
} 
.vinyl { 
    position:absolute; 
    z-index:1; 
    bottom:4px; 
    left:5px; 
    display:block; 
    width:175px; 
    height:175px; 
    border-radius:200px; 
    background: -moz-linear-gradient(top,  rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(100%,rgba(0,0,0,1))); 
    background: -webkit-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 1); 
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35), inset 0px -1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.4); 
    border:1px solid #595959; 
    transition: all 500ms ease-in-out; 
    -moz-transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
} 
.case:hover .vinyl { 
    animation: spin 600ms ease-in-out; 
    -moz-animation: spin 600ms ease-in-out; 
    -webkit-animation: spin 600ms ease-in-out; 
    left:98px; 
} 
.vinyl:before { 
    position:absolute; 
    display:block; 
    content: ""; 
    width:100%; 
    height:100%; 
    border-radius:100%; 
    background: -moz-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%, rgba(89,89,89,0.4) 1%, rgba(35,35,35,0.4) 2%, rgba(86,86,86,0.4) 3%, rgba(35,35,35,0.4) 4%, rgba(86,86,86,0.4) 5%, rgba(35,35,35,0.4) 6%, rgba(86,86,86,0.4) 7%, rgba(35,35,35,0.4) 8%, rgba(86,86,86,0.4) 9%, rgba(35,35,35,0.4) 10%, rgba(86,86,86,0.4) 11%, rgba(35,35,35,0.4) 12%, rgba(86,86,86,0.4) 13%, rgba(35,35,35,0.4) 14%, rgba(86,86,86,0.4) 15%, rgba(35,35,35,0.4) 16%, rgba(86,86,86,0.4) 17%, rgba(35,35,35,0.4) 18%, rgba(86,86,86,0.4) 19%, rgba(35,35,35,0.4) 20%, rgba(86,86,86,0.4) 21%, rgba(35,35,35,0.4) 22%, rgba(86,86,86,0.4) 23%, rgba(35,35,35,0.4) 24%, rgba(86,86,86,0.4) 25%, rgba(35,35,35,0.4) 26%, rgba(86,86,86,0.4) 27%, rgba(35,35,35,0.4) 28%, rgba(86,86,86,0.4) 29%, rgba(35,35,35,0.4) 30%, rgba(86,86,86,0.4) 31%, rgba(35,35,35,0.4) 32%, rgba(86,86,86,0.4) 33%, rgba(35,35,35,0.4) 34%, rgba(86,86,86,0.4) 35%, rgba(35,35,35,0.4) 36%, rgba(86,86,86,0.4) 37%, rgba(35,35,35,0.4) 38%, rgba(86,86,86,0.4) 39%, rgba(35,35,35,0.4) 40%, rgba(86,86,86,0.4) 41%, rgba(35,35,35,0.4) 42%, rgba(86,86,86,0.4) 43%, rgba(35,35,35,0.4) 44%, rgba(86,86,86,0.4) 45%, rgba(35,35,35,0.4) 46%, rgba(86,86,86,0.4) 47%, rgba(35,35,35,0.4) 48%, rgba(86,86,86,0.4) 49%, rgba(35,35,35,0.4) 50%, rgba(86,86,86,0.4) 51%, rgba(35,35,35,0.4) 52%, rgba(86,86,86,0.4) 53%, rgba(35,35,35,0.4) 54%, rgba(86,86,86,0.4) 55%, rgba(35,35,35,0.4) 56%, rgba(86,86,86,0.4) 57%, rgba(35,35,35,0.4) 58%, rgba(86,86,86,0.4) 59%, rgba(35,35,35,0.4) 60%, rgba(86,86,86,0.4) 61%, rgba(35,35,35,0.4) 62%, rgba(86,86,86,0.4) 63%, rgba(35,35,35,0.4) 64%, rgba(86,86,86,0.4) 65%, rgba(35,35,35,0.4) 66%, rgba(86,86,86,0.4) 67%, rgba(35,35,35,0.4) 68%, rgba(86,86,86,0.4) 69%, rgba(35,35,35,0.4) 70%, rgba(86,86,86,0.4) 71%, rgba(35,35,35,0.4) 72%, rgba(86,86,86,0.4) 73%, rgba(35,35,35,0.4) 74%, rgba(86,86,86,0.4) 75%, rgba(35,35,35,0.4) 76%, rgba(86,86,86,0.4) 77%, rgba(35,35,35,0.4) 78%, rgba(86,86,86,0.4) 79%, rgba(35,35,35,0.4) 80%, rgba(86,86,86,0.4) 81%, rgba(35,35,35,0.4) 82%, rgba(86,86,86,0.4) 83%, rgba(35,35,35,0.4) 84%, rgba(86,86,86,0.4) 85%, rgba(35,35,35,0.4) 86%, rgba(86,86,86,0.4) 87%, rgba(35,35,35,0.4) 88%, rgba(86,86,86,0.4) 89%, rgba(35,35,35,0.4) 90%, rgba(86,86,86,0.4) 91%, rgba(35,35,35,0.4) 92%, rgba(86,86,86,0.4) 93%, rgba(35,35,35,0.4) 94%, rgba(86,86,86,0.4) 95%, rgba(35,35,35,0.4) 96%, rgba(86,86,86,0.4) 97%, rgba(86,86,86,0.4) 97%, rgba(35,35,35,0.4) 98%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(38,38,38,0.4)), color-stop(1%,rgba(89,89,89,0.4)), color-stop(2%,rgba(35,35,35,0.4)), color-stop(3%,rgba(86,86,86,0.4)), color-stop(4%,rgba(35,35,35,0.4)), color-stop(5%,rgba(86,86,86,0.4)), color-stop(6%,rgba(35,35,35,0.4)), color-stop(7%,rgba(86,86,86,0.4)), color-stop(8%,rgba(35,35,35,0.4)), color-stop(9%,rgba(86,86,86,0.4)), color-stop(10%,rgba(35,35,35,0.4)), color-stop(11%,rgba(86,86,86,0.4)), color-stop(12%,rgba(35,35,35,0.4)), color-stop(13%,rgba(86,86,86,0.4)), color-stop(14%,rgba(35,35,35,0.4)), color-stop(15%,rgba(86,86,86,0.4)), color-stop(16%,rgba(35,35,35,0.4)), color-stop(17%,rgba(86,86,86,0.4)), color-stop(18%,rgba(35,35,35,0.4)), color-stop(19%,rgba(86,86,86,0.4)), color-stop(20%,rgba(35,35,35,0.4)), color-stop(21%,rgba(86,86,86,0.4)), color-stop(22%,rgba(35,35,35,0.4)), color-stop(23%,rgba(86,86,86,0.4)), color-stop(24%,rgba(35,35,35,0.4)), color-stop(25%,rgba(86,86,86,0.4)), color-stop(26%,rgba(35,35,35,0.4)), color-stop(27%,rgba(86,86,86,0.4)), color-stop(28%,rgba(35,35,35,0.4)), color-stop(29%,rgba(86,86,86,0.4)), color-stop(30%,rgba(35,35,35,0.4)), color-stop(31%,rgba(86,86,86,0.4)), color-stop(32%,rgba(35,35,35,0.4)), color-stop(33%,rgba(86,86,86,0.4)), color-stop(34%,rgba(35,35,35,0.4)), color-stop(35%,rgba(86,86,86,0.4)), color-stop(36%,rgba(35,35,35,0.4)), color-stop(37%,rgba(86,86,86,0.4)), color-stop(38%,rgba(35,35,35,0.4)), color-stop(39%,rgba(86,86,86,0.4)), color-stop(40%,rgba(35,35,35,0.4)), color-stop(41%,rgba(86,86,86,0.4)), color-stop(42%,rgba(35,35,35,0.4)), color-stop(43%,rgba(86,86,86,0.4)), color-stop(44%,rgba(35,35,35,0.4)), color-stop(45%,rgba(86,86,86,0.4)), color-stop(46%,rgba(35,35,35,0.4)), color-stop(47%,rgba(86,86,86,0.4)), color-stop(48%,rgba(35,35,35,0.4)), color-stop(49%,rgba(86,86,86,0.4)), color-stop(50%,rgba(35,35,35,0.4)), color-stop(51%,rgba(86,86,86,0.4)), color-stop(52%,rgba(35,35,35,0.4)), color-stop(53%,rgba(86,86,86,0.4)), color-stop(54%,rgba(35,35,35,0.4)), color-stop(55%,rgba(86,86,86,0.4)), color-stop(56%,rgba(35,35,35,0.4)), color-stop(57%,rgba(86,86,86,0.4)), color-stop(58%,rgba(35,35,35,0.4)), color-stop(59%,rgba(86,86,86,0.4)), color-stop(60%,rgba(35,35,35,0.4)), color-stop(61%,rgba(86,86,86,0.4)), color-stop(62%,rgba(35,35,35,0.4)), color-stop(63%,rgba(86,86,86,0.4)), color-stop(64%,rgba(35,35,35,0.4)), color-stop(65%,rgba(86,86,86,0.4)), color-stop(66%,rgba(35,35,35,0.4)), color-stop(67%,rgba(86,86,86,0.4)), color-stop(68%,rgba(35,35,35,0.4)), color-stop(69%,rgba(86,86,86,0.4)), color-stop(70%,rgba(35,35,35,0.4)), color-stop(71%,rgba(86,86,86,0.4)), color-stop(72%,rgba(35,35,35,0.4)), color-stop(73%,rgba(86,86,86,0.4)), color-stop(74%,rgba(35,35,35,0.4)), color-stop(75%,rgba(86,86,86,0.4)), color-stop(76%,rgba(35,35,35,0.4)), color-stop(77%,rgba(86,86,86,0.4)), color-stop(78%,rgba(35,35,35,0.4)), color-stop(79%,rgba(86,86,86,0.4)), color-stop(80%,rgba(35,35,35,0.4)), color-stop(81%,rgba(86,86,86,0.4)), color-stop(82%,rgba(35,35,35,0.4)), color-stop(83%,rgba(86,86,86,0.4)), color-stop(84%,rgba(35,35,35,0.4)), color-stop(85%,rgba(86,86,86,0.4)), color-stop(86%,rgba(35,35,35,0.4)), color-stop(87%,rgba(86,86,86,0.4)), color-stop(88%,rgba(35,35,35,0.4)), color-stop(89%,rgba(86,86,86,0.4)), color-stop(90%,rgba(35,35,35,0.4)), color-stop(91%,rgba(86,86,86,0.4)), color-stop(92%,rgba(35,35,35,0.4)), color-stop(93%,rgba(86,86,86,0.4)), color-stop(94%,rgba(35,35,35,0.4)), color-stop(95%,rgba(86,86,86,0.4)), color-stop(96%,rgba(35,35,35,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(98%,rgba(35,35,35,0.4))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    background: -o-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    background: -ms-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    background: radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    top:0; 
    left:0; 
} 
.vinyl:after { 
    position:absolute; 
    display:block; 
    content: "\002022"; 
    width:34px; 
    height:53px; 
    line-height:53px; 
    border-radius:53px; 
    top:60px; 
    left:60px; 
    padding-left:19px; 
    color:#000; 
    background: -moz-linear-gradient(-45deg,  rgba(252,252,252,1) 0%, rgba(239,239,239,1) 100%); 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(239,239,239,1))); 
    background: -webkit-linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    background: -o-linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    background: -ms-linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    background: linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    border:1px solid #000; 
    font-size:40px; 
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.8); 
} 
.slotwrapper { 
    position:absolute; 
    display:block; 
    top:0px; 
    right:-10px; 
    height:100%; 
    width:10px; 
    overflow:hidden; 
} 
.slot{ 
    position:absolute; 
    display:block; 
    top:-160px; 
    left:-67px; 
    height:505px; 
    width:85px; 
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(76,76,76,1) 51%, rgba(76,76,76,0) 52%, rgba(0,0,0,0.1) 53%, rgba(0,0,0,0) 58%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(51%,rgba(76,76,76,1)), color-stop(52%,rgba(76,76,76,0)), color-stop(53%,rgba(0,0,0,0.1)), color-stop(58%,rgba(0,0,0,0))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
    background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
} 
@keyframes spin 
{ 
from { 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
    -o-transform:rotate(0deg); 
    -ms-transform:rotate(0deg); 
    transform:rotate(0deg); 
} 
to { 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 
} 
 
@-moz-keyframes spin 
{ 
from { 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg); 
} 
to { 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 
} 
 
@-webkit-keyframes spin 
{ 
from { 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
} 
to { 
    -webkit-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 
} </blockquote>
</div>
 
Step 5. Click on the Save template button to save the changes. For applying the animated vinyl record effect on your image, first upload the picture for your album cover, copy the URL of it and then paste it inside a Notepad so that you can use it later. If you don't know how to upload images and get their urls, please read this tutorial: <a href="http://buzzblogger.blogspot.com/2013/09/upload-images-and-get-url-of-image.html" rel="nofollow" style="color: blue;" target="_blank">How to upload images and get the URLs</a> 
 
Step 6. When you create a post, add this code inside the HTML section: 
<blockquote class="tr_bq">
<div class="case"> 
 <div class="overlay"></div> 
 <img class="cover" src="http://add-image-url-here.com/"/> 
TEXT HERE 
   <div class="slotwrapper"> 
  <div class="slot"></div> 
 </div> 
 <div class="vinyl"></div> 
</div></blockquote>
Replace the URL in blue with the one that you saved earlier and the text in red with the info to show on mouse over. In case you don't need any info, remove this part: 
<blockquote class="tr_bq">
TEXT HERE</blockquote>
Step 7. Publish your post and you're done! Enjoy! 
<style>.info { position: absolute; z-index: 3; top: 20%; zoom: 1; filter: alpha(opacity=0); opacity: 0; padding: 10px; text-align: center; color: #eee; font-size: 13px; font-weight: bold; background: #333; background: rgba(0,0,0,.7); -moz-transition:all linear 0.5s 0s; -webkit-transition:all linear 0.5s 0s; transition:all ease 0.5s 0s; } .case:hover .info, .case:hover .vinyl { filter: alpha(opacity=100); opacity:1; } .case { position:relative; display:block; width:185px; height:185px; -webkit-border-radius:3px; border-radius:3px; z-index:2; -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); margin:0 auto; } .case:after { position:absolute; display:block; content: ""; width:265px; height:10px; left:-40px; bottom:-8px; z-index:1; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.45)), color-stop(50%,rgba(0,0,0,0)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); } .case .cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); } .case .overlay{ position:absolute; display:block; top:0; left:0; z-index:3; width:100%; height:100%; -webkit-box-shadow: inset 1px 1px 4px 0px rgba(255, 255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); box-shadow: inset 1px 1px 4px 0px rgba(255,255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); -webkit-border-radius:3px; border-radius:3px; border:1px solid rgba(0, 0, 0, 0.35); } .case .overlay:before{ position:absolute; display:block; content: ""; top:0; left:0; z-index:4; width:100%; height:100%; background: -moz-linear-gradient(-55deg, rgba(255,255,255,0.1) 0%, rgba(244,244,244,0.35) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(50%,rgba(244,244,244,0.35)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* IE10+ */ background: linear-gradient(-55deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* W3C */ -webkit-border-radius:3px; border-radius:3px; } .vinyl { position:absolute; z-index:1; bottom:4px; left:5px; display:block; width:175px; height:175px; border-radius:200px; background: -moz-linear-gradient(top, rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); -webkit-box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35), inset 0px -1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.4); border:1px solid #595959; transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; } .case:hover .vinyl { animation: spin 600ms ease-in-out; -moz-animation: spin 600ms ease-in-out; -webkit-animation: spin 600ms ease-in-out; left:98px; } .vinyl:before { position:absolute; display:block; content: ""; width:100%; height:100%; border-radius:100%; background: -moz-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%, rgba(89,89,89,0.4) 1%, rgba(35,35,35,0.4) 2%, rgba(86,86,86,0.4) 3%, rgba(35,35,35,0.4) 4%, rgba(86,86,86,0.4) 5%, rgba(35,35,35,0.4) 6%, rgba(86,86,86,0.4) 7%, rgba(35,35,35,0.4) 8%, rgba(86,86,86,0.4) 9%, rgba(35,35,35,0.4) 10%, rgba(86,86,86,0.4) 11%, rgba(35,35,35,0.4) 12%, rgba(86,86,86,0.4) 13%, rgba(35,35,35,0.4) 14%, rgba(86,86,86,0.4) 15%, rgba(35,35,35,0.4) 16%, rgba(86,86,86,0.4) 17%, rgba(35,35,35,0.4) 18%, rgba(86,86,86,0.4) 19%, rgba(35,35,35,0.4) 20%, rgba(86,86,86,0.4) 21%, rgba(35,35,35,0.4) 22%, rgba(86,86,86,0.4) 23%, rgba(35,35,35,0.4) 24%, rgba(86,86,86,0.4) 25%, rgba(35,35,35,0.4) 26%, rgba(86,86,86,0.4) 27%, rgba(35,35,35,0.4) 28%, rgba(86,86,86,0.4) 29%, rgba(35,35,35,0.4) 30%, rgba(86,86,86,0.4) 31%, rgba(35,35,35,0.4) 32%, rgba(86,86,86,0.4) 33%, rgba(35,35,35,0.4) 34%, rgba(86,86,86,0.4) 35%, rgba(35,35,35,0.4) 36%, rgba(86,86,86,0.4) 37%, rgba(35,35,35,0.4) 38%, rgba(86,86,86,0.4) 39%, rgba(35,35,35,0.4) 40%, rgba(86,86,86,0.4) 41%, rgba(35,35,35,0.4) 42%, rgba(86,86,86,0.4) 43%, rgba(35,35,35,0.4) 44%, rgba(86,86,86,0.4) 45%, rgba(35,35,35,0.4) 46%, rgba(86,86,86,0.4) 47%, rgba(35,35,35,0.4) 48%, rgba(86,86,86,0.4) 49%, rgba(35,35,35,0.4) 50%, rgba(86,86,86,0.4) 51%, rgba(35,35,35,0.4) 52%, rgba(86,86,86,0.4) 53%, rgba(35,35,35,0.4) 54%, rgba(86,86,86,0.4) 55%, rgba(35,35,35,0.4) 56%, rgba(86,86,86,0.4) 57%, rgba(35,35,35,0.4) 58%, rgba(86,86,86,0.4) 59%, rgba(35,35,35,0.4) 60%, rgba(86,86,86,0.4) 61%, rgba(35,35,35,0.4) 62%, rgba(86,86,86,0.4) 63%, rgba(35,35,35,0.4) 64%, rgba(86,86,86,0.4) 65%, rgba(35,35,35,0.4) 66%, rgba(86,86,86,0.4) 67%, rgba(35,35,35,0.4) 68%, rgba(86,86,86,0.4) 69%, rgba(35,35,35,0.4) 70%, rgba(86,86,86,0.4) 71%, rgba(35,35,35,0.4) 72%, rgba(86,86,86,0.4) 73%, rgba(35,35,35,0.4) 74%, rgba(86,86,86,0.4) 75%, rgba(35,35,35,0.4) 76%, rgba(86,86,86,0.4) 77%, rgba(35,35,35,0.4) 78%, rgba(86,86,86,0.4) 79%, rgba(35,35,35,0.4) 80%, rgba(86,86,86,0.4) 81%, rgba(35,35,35,0.4) 82%, rgba(86,86,86,0.4) 83%, rgba(35,35,35,0.4) 84%, rgba(86,86,86,0.4) 85%, rgba(35,35,35,0.4) 86%, rgba(86,86,86,0.4) 87%, rgba(35,35,35,0.4) 88%, rgba(86,86,86,0.4) 89%, rgba(35,35,35,0.4) 90%, rgba(86,86,86,0.4) 91%, rgba(35,35,35,0.4) 92%, rgba(86,86,86,0.4) 93%, rgba(35,35,35,0.4) 94%, rgba(86,86,86,0.4) 95%, rgba(35,35,35,0.4) 96%, rgba(86,86,86,0.4) 97%, rgba(86,86,86,0.4) 97%, rgba(35,35,35,0.4) 98%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(38,38,38,0.4)), color-stop(1%,rgba(89,89,89,0.4)), color-stop(2%,rgba(35,35,35,0.4)), color-stop(3%,rgba(86,86,86,0.4)), color-stop(4%,rgba(35,35,35,0.4)), color-stop(5%,rgba(86,86,86,0.4)), color-stop(6%,rgba(35,35,35,0.4)), color-stop(7%,rgba(86,86,86,0.4)), color-stop(8%,rgba(35,35,35,0.4)), color-stop(9%,rgba(86,86,86,0.4)), color-stop(10%,rgba(35,35,35,0.4)), color-stop(11%,rgba(86,86,86,0.4)), color-stop(12%,rgba(35,35,35,0.4)), color-stop(13%,rgba(86,86,86,0.4)), color-stop(14%,rgba(35,35,35,0.4)), color-stop(15%,rgba(86,86,86,0.4)), color-stop(16%,rgba(35,35,35,0.4)), color-stop(17%,rgba(86,86,86,0.4)), color-stop(18%,rgba(35,35,35,0.4)), color-stop(19%,rgba(86,86,86,0.4)), color-stop(20%,rgba(35,35,35,0.4)), color-stop(21%,rgba(86,86,86,0.4)), color-stop(22%,rgba(35,35,35,0.4)), color-stop(23%,rgba(86,86,86,0.4)), color-stop(24%,rgba(35,35,35,0.4)), color-stop(25%,rgba(86,86,86,0.4)), color-stop(26%,rgba(35,35,35,0.4)), color-stop(27%,rgba(86,86,86,0.4)), color-stop(28%,rgba(35,35,35,0.4)), color-stop(29%,rgba(86,86,86,0.4)), color-stop(30%,rgba(35,35,35,0.4)), color-stop(31%,rgba(86,86,86,0.4)), color-stop(32%,rgba(35,35,35,0.4)), color-stop(33%,rgba(86,86,86,0.4)), color-stop(34%,rgba(35,35,35,0.4)), color-stop(35%,rgba(86,86,86,0.4)), color-stop(36%,rgba(35,35,35,0.4)), color-stop(37%,rgba(86,86,86,0.4)), color-stop(38%,rgba(35,35,35,0.4)), color-stop(39%,rgba(86,86,86,0.4)), color-stop(40%,rgba(35,35,35,0.4)), color-stop(41%,rgba(86,86,86,0.4)), color-stop(42%,rgba(35,35,35,0.4)), color-stop(43%,rgba(86,86,86,0.4)), color-stop(44%,rgba(35,35,35,0.4)), color-stop(45%,rgba(86,86,86,0.4)), color-stop(46%,rgba(35,35,35,0.4)), color-stop(47%,rgba(86,86,86,0.4)), color-stop(48%,rgba(35,35,35,0.4)), color-stop(49%,rgba(86,86,86,0.4)), color-stop(50%,rgba(35,35,35,0.4)), color-stop(51%,rgba(86,86,86,0.4)), color-stop(52%,rgba(35,35,35,0.4)), color-stop(53%,rgba(86,86,86,0.4)), color-stop(54%,rgba(35,35,35,0.4)), color-stop(55%,rgba(86,86,86,0.4)), color-stop(56%,rgba(35,35,35,0.4)), color-stop(57%,rgba(86,86,86,0.4)), color-stop(58%,rgba(35,35,35,0.4)), color-stop(59%,rgba(86,86,86,0.4)), color-stop(60%,rgba(35,35,35,0.4)), color-stop(61%,rgba(86,86,86,0.4)), color-stop(62%,rgba(35,35,35,0.4)), color-stop(63%,rgba(86,86,86,0.4)), color-stop(64%,rgba(35,35,35,0.4)), color-stop(65%,rgba(86,86,86,0.4)), color-stop(66%,rgba(35,35,35,0.4)), color-stop(67%,rgba(86,86,86,0.4)), color-stop(68%,rgba(35,35,35,0.4)), color-stop(69%,rgba(86,86,86,0.4)), color-stop(70%,rgba(35,35,35,0.4)), color-stop(71%,rgba(86,86,86,0.4)), color-stop(72%,rgba(35,35,35,0.4)), color-stop(73%,rgba(86,86,86,0.4)), color-stop(74%,rgba(35,35,35,0.4)), color-stop(75%,rgba(86,86,86,0.4)), color-stop(76%,rgba(35,35,35,0.4)), color-stop(77%,rgba(86,86,86,0.4)), color-stop(78%,rgba(35,35,35,0.4)), color-stop(79%,rgba(86,86,86,0.4)), color-stop(80%,rgba(35,35,35,0.4)), color-stop(81%,rgba(86,86,86,0.4)), color-stop(82%,rgba(35,35,35,0.4)), color-stop(83%,rgba(86,86,86,0.4)), color-stop(84%,rgba(35,35,35,0.4)), color-stop(85%,rgba(86,86,86,0.4)), color-stop(86%,rgba(35,35,35,0.4)), color-stop(87%,rgba(86,86,86,0.4)), color-stop(88%,rgba(35,35,35,0.4)), color-stop(89%,rgba(86,86,86,0.4)), color-stop(90%,rgba(35,35,35,0.4)), color-stop(91%,rgba(86,86,86,0.4)), color-stop(92%,rgba(35,35,35,0.4)), color-stop(93%,rgba(86,86,86,0.4)), color-stop(94%,rgba(35,35,35,0.4)), color-stop(95%,rgba(86,86,86,0.4)), color-stop(96%,rgba(35,35,35,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(98%,rgba(35,35,35,0.4))); background: -webkit-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); background: -o-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); background: -ms-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); background: radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); top:0; left:0; } .vinyl:after { position:absolute; display:block; content: "\002022"; width:34px; height:53px; line-height:53px; border-radius:53px; top:60px; left:60px; padding-left:19px; color:#000; background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(239,239,239,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(239,239,239,1))); background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); background: linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); border:1px solid #000; font-size:40px; text-shadow: 0px 0px 3px rgba(0,0,0, 0.8); } .slotwrapper { position:absolute; display:block; top:0px; right:-10px; height:100%; width:10px; overflow:hidden; } .slot{ position:absolute; display:block; top:-160px; left:-67px; height:505px; width:85px; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(76,76,76,1) 51%, rgba(76,76,76,0) 52%, rgba(0,0,0,0.1) 53%, rgba(0,0,0,0) 58%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(51%,rgba(76,76,76,1)), color-stop(52%,rgba(76,76,76,0)), color-stop(53%,rgba(0,0,0,0.1)), color-stop(58%,rgba(0,0,0,0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); } @keyframes spin { from { -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } to { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform:rotate(0deg); transform:rotate(0deg); } to { -moz-transform:rotate(360deg); transform:rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform:rotate(0deg); transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } </style></div>

Blog Design css Image Effects Create a CSS3 Image Hover Effect with Animated Vinyl Record

Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect...